<template>
	<view class="container">
		<scroll-view scroll-y="true" class="con">
			<view class="device-list">
				<view class="list-item" v-for="(item,index) in list" :key="item.id" @click="openDoorFn(item.id)">
					<div class="list-left">
						<span :class="item.use_state_text == '忙碌' ? 'active' : ''">{{item.use_state_text}}</span>
					</div>
					<div class="list-right">
						<p>电池编号：{{item.info_code}}</p>
						<div class="right-desc">
							<span>仓门号：{{item.item_code}}</span>
							<span>电池电压：{{item.dianya}}</span>
							<span>电池电量：{{item.dianliu}}</span>
							<span>电池取出次数：{{item.use_sum}}</span>
							<span>仓门开关：{{item.open_status_text}}</span>
							<span>是否可用：{{item.is_available_text}}</span>
						</div>
					</div>
				</view>
			</view>
		</scroll-view>
		<view class="maskDoor" v-if="showOpenDoor">
			<view class="content">
				<image src="/static/img/index/close.png" mode="widthFix" @click="close"></image>
				<view class="tit">
					是否开门?
				</view>
				<view class="list">
					<view class="list-item" @click="showOpenDoor = false">
						<text>否</text>
					</view>
					<view class="list-item" @click="openDoorFnSubmit('1')">
						<text>是</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { batteryDetail, batteryState, openDevice } from '../../../api/api.js'
export default {
	data() {
		return {
			isMask: false,
			device_id:'',
			list: [],
			
			dataInfo: {
				name:'',
				"nickname": "",
				"mobile": "",
				"use_state": "",
				"use_num": 0,
				"use_length": 0
			},
			showOpenDoor:false,
			showOverOrder:false
		}
	},
	onLoad(options) {
		this.device_id = options.device_id
		this.getInfo()
	},
	methods: {
		getInfo() {
			batteryDetail({
				device_id: this.device_id
			}).then(res => {
				console.log(res)
				this.list = res.data.list
			})
		},
		// open(id,name) {
		// 	this.isMask = true
		// 	batteryState({
		// 		device_item_id: id
		// 	}).then(res=>{
		// 		console.log(res)
		// 		this.dataInfo = res.data
		// 		this.dataInfo.name = name
		// 	})
		// },
		close(){
			this.showOpenDoor = false
		},
		openDoorFn(id){
			this.order_id = id;
			this.showOpenDoor = true;
		},
		openDoorFnSubmit(type) {
			openDevice({
				id:this.order_id,
				type:type
			}).then(res => {
				console.log(res)
				if(res.code == '1'){
					this.showOpenDoor = false;
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			})
		},
	},
}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background: #F8F8F8;
		position: relative;
	}

	.device-list {
		.list-item{
			width: 92%;
			background: #FFFFFF;
			margin: 20px auto;
			padding: 15px;
			display: flex;
			justify-content: space-between;
			border-radius: 8px;
			.list-left{
				margin-right: 10px;
				span{
					width: 48px;
					height: 48px;
					background: #EDEDED;
					border-radius: 8px 8px 8px 8px;
					line-height: 48px;
					text-align: center;
					display: block;
					&.active{
						background: #1F90FE;
						color: #fff;
					}
				}
			}
			.list-right{
				p{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 16px;
					color: #333333;
				}
				.right-desc{
					display: flex;
					flex-wrap: wrap;
					span{
						display: block;
						font-weight: 400;
						font-size: 14px;
						color: #666666;
						margin-right: 20px;
					}
				}
			}
		}
	}
	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba($color: #000000, $alpha: 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;

		.content {
			width: 560upx;
			height: 500upx;
			background-color: #FFFFFF;
			border-radius: 12upx;
			padding: 20px;

			image {
				width: 30upx;
			}

			.tit {
				width: 100%;
				text-align: center;
				font-size: 32upx;
				margin-bottom: 10upx;
				font-weight: bold;
			}

			.list {

				.list-item {
					height: 80upx;
					border-bottom: none;
				}
			}

		}
	}
	.maskDoor {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba($color: #000000, $alpha: 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		
		.content {
			width: 560upx;
			height: 300upx;
			background-color: #FFFFFF;
			border-radius: 12upx;
			padding: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			image {
				width: 30upx;
			}
			
			.tit {
				width: 100%;
				text-align: center;
				font-size: 32upx;
				margin-bottom: 10upx;
				font-weight: bold;
			}
			
			.list {
				display: flex;
				justify-content: space-around;
				.list-item {
					width: 48%;
					height: 76upx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: none;
					color:#FFFFFF;
					background: #3eb9fe;
					border-radius: 30rpx;
					&:first-child{
						color:#999;
						background: transparent;
						border: 2rpx solid #999999;
					}
				}
			}
			
		}
	}
	.maskFei {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba($color: #000000, $alpha: 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		
		.content {
			width: 560upx;
			height: 300upx;
			background-color: #FFFFFF;
			border-radius: 12upx;
			padding: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			image {
				width: 30upx;
			}
			
			.tit {
				width: 100%;
				text-align: center;
				font-size: 32upx;
				margin-bottom: 10upx;
				font-weight: bold;
			}
			
			.list {
				display: flex;
				justify-content: space-around;
				.list-item {
					width: 48%;
					height: 76upx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: none;
					color:#FFFFFF;
					background: #3eb9fe;
					border-radius: 30rpx;
					&:first-child{
						color:#999;
						background: transparent;
						border: 2rpx solid #999999;
					}
				}
			}
			
		}
	}
</style>
